<template>
	<view class="coupon">
		<custom-navi :show-home="false">编辑到店券</custom-navi>
		<!-- <item v-for="(item,index) in itemList" :key="index" :item="item" @photoChange="handlePhotoChange" @change="handleChange"></item> -->
		<view class="coupon-title">基础信息</view>
		<view class="coupon-list">
			<view class="title">商品分类</view>
			<view class="txt" @click="bell">{{managementName ==''? '请选择分类' : managementName}}</view>
			<view class="icon" @click="bell">
				<image src="/static/little-more.png" mode=""></image>
			</view>
		</view>
		<view class="coupon-title">商品信息</view>
		<view class="coupon-list">
			<view class="title">到店券标题</view>
			<view class="txt">
				<input type="text" placeholder="请输入到店券标题" placeholder-style="font-size:34rpx" @input="volumeNameBtn" :value="volumeName" />
			</view>
		</view>
		<view class="coupon-list">
			<view class="title">到店券面值</view>
			<view class="txt">
				<input type="number" :value="bookValue==''?'0':bookValue" @input="bookValueBtn" />
			</view>
			<view class="unit">
				元
			</view>
		</view>
		<view class="coupon-list">
			<view class="title">到店券售价</view>
			<view class="txt">
				<input type="number" @input="salesPriceBtn" :value="salesPrice==''?'0':salesPrice" />
			</view>
			<view class="unit">
				元
			</view>
		</view>
		<view class="coupon-list">
			<view class="title">到店券有效期</view>
			<view class="txts">
				<radio-group @change="radioChange">
					<label class="radio" v-for="(item, index) in items" :key="index">
						<radio :value="item.value" :checked="index === current" style="transform:scale(0.6)" color="rgba(12, 212, 211, 1)" /><text>{{item.name}}</text>
					</label>
				</radio-group>
			</view>
		</view>

		<!-- <view class="coupon-list" v-if="current === 0">
			<view class="title">下单后有效时间</view>
			<view class="txt">
				<input type="number" placeholder="请输入相对时间" @input="handleChangeInputDate" />
			</view>
			<view class="unit">
				天
			</view>
		</view> -->

		<view class="date">
			<view class="date-bottom" v-if="current === 0">
				<view class="date-bottom-left">
					<view class="pi-pd-left-36 pi-pd-right-46">
						<picker mode="date" :value="getStartDate" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{ getStartDate }}</view>
						</picker>
					</view>
					<view class="pi-pd-right-72">至</view>
					<view>
						<picker mode="date" :value="getEndDate" :start="getStartDate" :end="endDate" @change="bindEndDateChange">
							<view class="uni-input">{{ getEndDate }}</view>
						</picker>
					</view>
				</view>
				<!-- <view class="date-bottom-right">删除</view> -->
			</view>
		</view>
		<view class="coupon-img">
			<view class="coupon-img-title">
				商品头图
			</view>
			<view class="coupon-img-txt">
				1:商品主图必须上传,图片像素至少为600*400,图片大小不超
				过5M,建议图片比例16:9</br>
				2:不可发与产品不相关的图片内容
			</view>
			<view v-for="(item,tag) in shopimg" :key='tag'>
				<view class="coupon-img-title">
					{{item.title}}
				</view>
				<view class="upImg-img">
					<view class="upload">
						<view v-for="(items,index) in item.imgList" :key="index" class="upload-child">
							<image :src="items.url" mode="widthFix" @tap="handleImgDetailSet(tag,index)" />
							<text class='cuIcon-roundclosefill upIcon' @click="deleteBtn(tag,index)"></text>
						</view>
						<view v-if="item.addShow" class="addPhoto" @tap="handlerImg(tag)"><text class='cuIcon-cameraadd'></text></view>
					</view>

				</view>
			</view>
			<image-cropper :src="cj" @confirm="confirm" @cancel="cancel"></image-cropper>

		</view>
		<view class="coupon-introduce">
			<view class="coupon-introduce-title">文字介绍</view>
			<view class="coupon-introduce-txt" @tap="handleTxtArea">
				<input type="text" :value="introduce" placeholder="请输入文字介绍" />
			</view>
		</view>
		<view class="coupon-check">
			<view class="coupon-check-title">
				审核通过立即上架
			</view>
			<view class="coupon-check-switch">
				<switch checked="true" @change="switch1Change" color='rgba(12, 212, 211, 1)' style="transform:scale(0.7)" />
			</view>
		</view>
		<view class="coupon-explain">
			<view class="txt">到店券将于商户通过到期时自动下架,实际下架时间以列表页展示的时间为准;若希望提早下架请手动下架商品或设置有效期的指定时间</view>
		</view>
		<view class="coupon-title" style="display: flex; align-items: center;">
			<view class="">使用须知</view>
			<view class="" style="margin-left: auto;" @click="lookBtn">查看模板</view>
		</view>
		<view class="container">
			<!-- <view class="container-title">使用须知</view> -->
			<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady" @blur="editorBtn" value='1212'></editor>
		</view>
		<!-- <view class="coupon-check">
				<view class="coupon-check-title">
					使用时间限制
				</view>
				<view class="coupon-check-switch">
					<switch :checked="timeShow" @change="switchTime" color='rgba(12, 212, 211, 1)' style="transform:scale(0.7)"/>
				</view>
			</view>
			<view class="coupon-time" v-if="timeShow">
				<view class="coupon-list" v-for="(item,index) in timeData" :key='index'>
					<view class="title">{{item.title}}</view>
					<view class="txt" @click="timeBtn(index)">{{item.txt}}</view>
					<view class="icon" @click="timeBtn(index)">
						<image src="/static/little-more.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="coupon-check">
				<view class="coupon-check-title">
					是否需要预约
				</view>
				<view class="coupon-check-switch">
					<switch :checked="make" @change="switchMake" color='rgba(12, 212, 211, 1)' style="transform:scale(0.7)"/>
				</view>
			</view>
			<view class="coupon-list" v-if="make">
				<view class="title">提前预约时间</view>
				<view class="txt" @click="subscribe">请选择</view>
				<view class="icon" @click="subscribe">
					<image src="/static/little-more.png" mode=""></image>
				</view>
			</view>
			<view class="coupon-list">
				<view class="title">到店券是否可积累使用</view>
				<view class="txt" @click="accumulate">{{addCoupon}}</view>
				<view class="icon" @click="accumulate">
					<image src="/static/little-more.png" mode=""></image>
				</view>
			</view>
			<view class="coupon-check">
				<view class="coupon-check-title">
					到店券是否全场通用
				</view>
				<view class="coupon-check-switch">
					<switch checked="true" @change="switch1Change" color='rgba(12, 212, 211, 1)' style="transform:scale(0.7)"/>
				</view>
			</view>
			<view class="coupon-list" v-for="(item,index) in discounts" :key='index'>
				<view class="title">{{item.title}}</view>
				<view class="txt" @click="more(index)">{{item.txt}}</view>
				<view class="icon" @click="more(index)">
					<image src="/static/little-more.png" mode=""></image>
				</view>
			</view> -->
		<view class="base"></view>
		<view class="coupon-operation">
			<view class="coupon-operation-protocol">
				<checkbox-group @change="CheckboxChange">
					<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A" style="transform:scale(0.6)"></checkbox>
					<text>
						我已阅读并同意
					</text>
					<text class="declare" @click="declareBtn">《免责申明》</text>
				</checkbox-group>
			</view>
			<view class="coupon-operation-btn">
				<view class="saveBtn" @click="saveBtn">保存</view>
				<view class="upBtn" @click="upBtn">提交</view>
			</view>
		</view>
		<uni-popup ref="popups" type="center">
			<view class="lookModal">
				<view class="">使用须知模板</view>
				<view class="">每周星期一不可用</view>
				<view class="">节假日春节不可用</view>
				<view class="">需提前一天预约</view>
				<view class="">到店券不可累积使用</view>
				<view class="">到店券可全场通用</view>
				<view class="">不与其他优惠同享</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="bottom">
			<view class="txtModal">
				<view class="txtModal-title">
					<view class="txt">{{titleModal}}</view>
					<view class="cancel" @click="cancelBtn">x</view>
				</view>
				<view class="txtModal-txt" v-if="txtShow">
					<view class="details" v-for="(item,index) in timeInfo" :key='index' @click="pitchOn(index)" :class="{active:item.active === true}">
						{{item.name}}
					</view>
				</view>
				<view class="txtModal-txt" v-else>
					<view class="list" v-for="(item,index) in listData" :key='index' @click="listBtn(index)" :class="{listActive:listTab === index}">
						{{item.name}}
					</view>
				</view>
				<view class="txtModal-btn" @click="ensureBtn">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import pop from './components/pop'
	import item from './components/item'
	import CONSTS from '@/src/consts'
	import ImageCropper from "../../components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
	// import {
	// 	addCoupon
	// } from '../../api.js'
	import {
		cloneDeep
	} from 'lodash'
	import data from './data'
	import {
		getBusinessType,
		addCoupon,
		viewDetails,
		businessType,
		updCoupon
	} from './api'
	export default {
		components: {
			item,
			pop,
			ImageCropper,
			uniPopup,

		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				form: {},
				itemList: [],
				tag: '',
				timeTab: '',
				timeShow: false,
				make: false,
				txtShow: false,
				titleModal: '',
				introduce: '',
				clssify: '',
				timeInfo: [],
				festivalData: [{
						name: '元旦',
						active: false
					},
					{
						name: '春节',
						active: false
					},
					{
						name: '劳动节',
						active: false
					},
					{
						name: '端午节',
						active: false
					},
					{
						name: '国庆节',
						active: false
					},
					{
						name: '清明节',
						active: false
					},
					{
						name: '中秋节',
						active: false
					},
					{
						name: '情人节',
						active: false
					},
					{
						name: '圣诞节',
						active: false
					}
				],
				weekData: [{
						name: '周一',
						active: false
					},
					{
						name: '周二',
						active: false
					},
					{
						name: '周三',
						active: false
					},
					{
						name: '周四',
						active: false
					},
					{
						name: '周五',
						active: false
					},
					{
						name: '周六',
						active: false
					},
					{
						name: '周日',
						active: false
					}
				],
				listData: [{
					name: '可'
				}, {
					name: '不可'
				}, {
					name: '部分可累积使用'
				}, ],
				addCoupon: '',
				listTab: '',
				discounts: [{
						title: '可否与其它优惠同享',
						txt: '请选择'
					},
					{
						title: '适用年龄段',
						txt: '请选择'
					}
				],
				presentTime: '',
				timeData: [{
						title: '每周不可用时间',
						txt: '请选择',
						sign: '',
					},
					{
						title: '节假日不可用时间',
						txt: '请选择',
						sign: '',
					}
				],
				timeValue: [],
				shopimg: [{
						title: '商品主图',
						imgList: [],
						addShow: true
					},
					{
						title: '服务特色',
						imgList: [],
						addShow: true
					}
				],
				imgList: [],
				cj: '',
				addShow: true,
				getEndDate: currentDate,
				getStartDate: currentDate,
				present: currentDate,
				checkbox: [{
					value: 'A',
					checked: true
				}],
				items: [
					// {
					// 	value: 'a',
					// 	name: '相对时间',
					// 	checked: true
					// },
					{
						value: 'b',
						name: '指定时间',
						checked: false

					}
				],
				current: 0,
				// *****
				volumeName: '',
				bookValue: '',
				salesPrice: '',
				shopNumberId: '',
				textIntroduction: '',
				placeholder: '输入使用须知....',
				editorTxt: '',
				timeAfterOrder: '',
				submissionType: '',
				picturePath: [], // 图片路径
				pictureType: [], // 图片类型(主图-1、特色-2)
				// *****
				redactId: '', // 编辑id
				redactTxt: '', // 编辑内容
				managementId: '', // 分类id
				managementName: '', // 分类名称
				mcCouponPictureList: '', // 图片管理
				firstType: [], // 类型1图片
				secondType: [], // 类型2图片
				rollId: '', // 到店卷id
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.redactId = option.id

			this.loadData()

			this.itemList = cloneDeep(data.data)
			this.getbusinessType()
			this.classifyApi()
			uni.$on('add', this.handleTextare)
		},
		onShow() {
			// console.log(this.present)
			this.presentTime = this.present
			const _self = this
			uni.getStorage({
				key: 'redactIntroduce',
				success: function(res) {
					// console.log(res.data);
					if (res.data != '') {
						_self.introduce = res.data
						// console.log(_self.introduce,123456)
					}

				}
			});
			uni.getStorage({
				key: 'redactClssify',
				success: function(res) {

					_self.clssify = res.data

					if (_self.clssify.managementName != '') {
						_self.managementName = _self.clssify.managementName
						_self.managementId = _self.clssify.managementId
					}
				}
			});
			uni.getStorage({
				key: 'shopInfo',
				success: function(res) {
					// console.log(res.data);
					_self.shopNumberId = res.data.id
				}
			});
			// console.log(this.present)

		},
		onUnload() {
			uni.$off()
		},
		onUnload() {
			uni.removeStorageSync('redactClssify');
		},
		computed: {
			startDate() {
				return this.getDate('start')
			},
			endDate() {
				return this.getDate('end')
			}
		},
		methods: {
			declareBtn() {
				uni.navigateTo({
					url: '/src/pages/coupon/pages/declare/index'
				})
			},
			async getbusinessType() {
				try {
					const {
						data
					} = await getBusinessType()
					this.itemList[1].option = data
				} catch (err) {
					console.log(err)
				}
			},
			handleTextare(e) {
				console.log(e)
				this.itemList[8].val = e.val
				this.form['textIntroduction'] = e.val
			},
			handlePhotoChange(e) {
				console.log(e)
			},
			handleChange(e) {
				Object.assign(this.form, e)
			},
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			radioChange(evt) {
				console.log(evt)
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			bindEndDateChange(e) {
				this.getEndDate = e.target.value
				// console.log(this.currentDate)
				// if(this.getEndDate<currentDate){
				// 	console.log(1,currentDate)
				// }
				// let jsonData = {}
				// jsonData[this.item.key.keyword[1]] = this.getEndDate
				// this.$emit('change', jsonData)
			},
			bindDateChange(e) {
				this.getStartDate = e.target.value
				// let jsonData = {}
				// jsonData[this.item.key.keyword[2]] = this.getStartDate
				// this.$emit('change', jsonData)
			},
			handleChangeInputDate(e) {
				console.log(e.detail.value)
				this.timeAfterOrder = e.detail.value
			},
			getDate(type) {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()

				if (type === 'start') {
					year = year - 60
				} else if (type === 'end') {
					year = year + 2
				}
				month = month > 9 ? month : '0' + month
				day = day > 9 ? day : '0' + day
				return `${year}-${month}-${day}`
			},
			// 图片上传
			handlerImg(tag) {
				const _self = this
				// console.log(tag)
				this.tag = tag
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: CONSTS.BASE_URL + '/basic/upload/single/store',
							// url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data)

								_self.cj = CONSTS.BASE_URL + '/basic' + res.data
							}
						});
					}
				})
			},
			confirm(e) {
				// console.log(e)
				this.cj = ''
				const _self = this
				uni.uploadFile({
					url: CONSTS.BASE_URL + '/basic/upload/single/store',
					filePath: e.detail.tempFilePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						const res = JSON.parse(uploadFileRes.data)

						const imgMode = {
							url: CONSTS.BASE_URL + '/basic' + res.data,
							path: res.data,
							title: ""
						}
						_self.shopimg[this.tag].imgList.push(imgMode)
						if (_self.shopimg[this.tag].imgList.length >= 3) {
							_self.shopimg[this.tag].addShow = false
						}
						_self.picturePath.push(imgMode.path)
						if (this.tag == 0) {
							_self.pictureType.push(1)
						} else {
							_self.pictureType.push(2)
						}
						console.log(_self.picturePath)
						console.log(_self.pictureType)
					}
				});
			},
			deleteBtn(tag, index) {
				// console.log(this.shopimg[tag].imgList)
				// console.log(this.shopimg[tag].imgList[index].path)
				// console.log(this.picturePath[0])
				for (var i = 0; i < this.picturePath.length; i++) {

					if (this.shopimg[tag].imgList[index].path === this.picturePath[i]) {
						this.picturePath.splice(i, 1)
						this.pictureType.splice(i, 1)

					}
				}

				this.shopimg[tag].imgList.splice(index, 1)
				console.log(this.shopimg[tag].imgList)
				if (this.shopimg[tag].imgList.length < 3) {
					this.shopimg[tag].addShow = true

				}
			},
			handleImgDetailSet(tag, index) {
				console.log(33333333)
				const _self = this
				this.tag = tag
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: CONSTS.BASE_URL + '/basic/upload/single/store',
							// url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data)
								console.log(4444444)
								_self.cj = CONSTS.BASE_URL + '/basic' + res.data
								for (var i = 0; i < _self.picturePath.length; i++) {
									console.log(66666)
									if (_self.shopimg[tag].imgList[index].path === _self.picturePath[i]) {
										console.log(555555)
										_self.picturePath.splice(i, 1)
										_self.pictureType.splice(i, 1)
									}
								}
								console.log(_self.shopimg[tag].imgList, 555555555)
								_self.shopimg[tag].imgList.splice(index, 1)
								// _self.picturePath.push(imgMode.path)
								// console.log(_self.imgList)
							}
						});
					}
				})

			},
			cancel() {
				console.log('canceled')
			},
			// 图片上传
			handleTxtArea() {
				this.$utils.common.navigateTo('/src/pages/my/pages/redact/pages/textare/index')
			},
			switch1Change() {

			},
			switchTime(e) {
				// console.log(e.detail.value)
				this.timeShow = e.detail.value
			},
			switchMake(e) {
				this.make = e.detail.value
			},
			bell() {
				// this.$refs.popup.open()
				this.$utils.common.navigateTo('/src/pages/my/pages/redact/pages/classify/index?managementId=' + this.managementId)
			},
			subscribe() {
				this.$utils.common.navigateTo('src/pages/coupon/pages/subscribe/index')
			},
			timeBtn(index) {
				this.txtShow = true
				this.timeTab = index
				if (index === 0) {
					this.timeInfo = this.weekData
					this.titleModal = '每周不可用时间'
				} else {
					this.timeInfo = this.festivalData
					this.titleModal = '节假日不可用时间'
				}
				this.$refs.popup.open()
			},
			accumulate() {
				this.txtShow = false
				this.titleModal = '到店券是否可积累使用'
				this.$refs.popup.open()
			},
			cancelBtn() {
				this.$refs.popup.close()
			},
			ensureBtn() {
				if (this.txtShow === true) {
					this.timeData[this.timeTab].txt = this.timeValue.join(',')
				} else {
					this.addCoupon = this.listData[this.listTab].name
				}
				this.$refs.popup.close()
			},
			more(index) {
				this.$utils.common.navigateTo('src/pages/coupon/pages/moreTxt/index?type=' + index)
			},
			listBtn(index) {
				this.listTab = index
			},
			pitchOn(index) {
				this.timeValue = []
				if (this.timeTab == 0) {
					if (this.weekData[index].active == false) {
						this.weekData[index].active = true
						for (var i = 0; i < this.weekData.length; i++) {
							if (this.weekData[i].active === true) {
								this.timeValue.push(this.weekData[i].name)
							}

						}
						// console.log(this.timeValue)
					} else {
						this.weekData[index].active = false
						for (var i = 0; i < this.weekData.length; i++) {
							if (this.weekData[i].active === true) {
								this.timeValue.push(this.weekData[i].name)
							}

						}
						// console.log(this.timeValue)
					}

				} else {
					if (this.festivalData[index].active == false) {
						this.festivalData[index].active = true
						for (var i = 0; i < this.weekData.length; i++) {
							if (this.festivalData[i].active === true) {
								this.timeValue.push(this.festivalData[i].name)
							}

						}
					} else {
						this.festivalData[index].active = false
						for (var i = 0; i < this.weekData.length; i++) {
							if (this.festivalData[i].active === true) {
								this.timeValue.push(this.festivalData[i].name)
							}

						}
					}
					// this.festivalData[index].active = true
				}
				// this.timeData[this.timeTab].sign=index
				// console.log(index)
			},
			volumeNameBtn(e) { // 卷名称
				this.volumeName = e.detail.value
			},
			bookValueBtn(e) { // 到店卷面值(元)
				this.bookValue = e.detail.value
			},
			salesPriceBtn(e) { // 到店卷售价(元)
				this.salesPrice = e.detail.value
			},
			timeAfterOrderBtn(e) { // 到店卷售价(元)
				this.timeAfterOrder = e.detail.value
			},
			textIntroductionBtn(e) { // 文字介绍
				this.textIntroduction = e.detail.value
			},
			onEditorReady(e) {

				// e.detail = {
				// 	html: "<p>1222</p>",
				// 	text: "1222↵"
				// }
				// console.log(e,874545454)
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
					setTimeout(() => {
					  let content = {
					  	// html: `<p wx:nodeid="70">121212121</p>`
						html: this.editorTxt
					  }
					  this.editorCtx.setContents(content); //设置富文本编辑器的内容
					}, 500)
					
				}).exec()
			},
			editorBtn(e) {
				console.log(e)
				this.editorTxt = e.detail.html
			},
			lookBtn() {
				this.$refs.popups.open()
			},
			// undo() {
			// 	this.editorCtx.undo()
			// },
			upBtn() {
				this.submissionType = 2
				this.upDataBtn()
			},
			saveBtn() {
				this.submissionType = 1
				this.upDataBtn()
			},
			async loadData() {
				let params = {
					id: this.redactId
				}
				try {
					const {
						data
					} = await viewDetails(params)
					// console.log(data)
					this.redactTxt = data,
						this.rollId = data.id,
						this.shopNumberId = data.shopNumberId,
						this.managementId = data.storeTotalType, // 商品总分类编号
						// this.clssify.managementId = data.storeTotalType,
						this.volumeName = data.volumeName, // 卷名称
						this.bookValue = data.bookValue, // 到店卷面值(元)
						this.salesPrice = data.salesPrice, // 到店卷售价(元)
						// this.dPeriodType: this.current==0? 2 : 1, // 到店卷有效期类型（1-相对时间、2-指定时间)
						// this.timeAfterOrder:this.current==0? this.timeAfterOrder : '', // 下单后有效时间（天）
						this.getStartDate = data.startTime, // 开始时间
						this.getEndDate = data.endTime, // 结束时间
						// this.picturePath= data.picturePath, // 图片路径
						// this.pictureType= data.pictureType, // 图片类型(主图-1、特`色-2)
						this.introduce = data.textIntroduction, // 文字介绍
						this.mcCouponPictureList = data.mcCouponPictureList
					this.editorTxt = data.otherJson // 其他字段(json格式)
					for (var i = 0; i < this.mcCouponPictureList.length; i++) {
						this.picturePath.push(this.mcCouponPictureList[i].picturePath)
						this.pictureType.push(this.mcCouponPictureList[i].pictureType)
						if (this.mcCouponPictureList[i].pictureType == 1) {
							this.firstType.push(this.mcCouponPictureList[i].picturePath)
							const imgMode = {
								url: CONSTS.BASE_URL + '/basic' + this.mcCouponPictureList[i].picturePath,
								path: this.mcCouponPictureList[i].picturePath,
								title: ""
							}
							this.shopimg[0].imgList.push(imgMode)
							if (this.shopimg[0].imgList.length >= 3) {
								this.shopimg[0].addShow = false
							}
						} else {
							this.secondType.push(this.mcCouponPictureList[i].picturePath)
							const imgMode = {
								url: CONSTS.BASE_URL + '/basic' + this.mcCouponPictureList[i].picturePath,
								path: this.mcCouponPictureList[i].picturePath,
								title: ""
							}
							this.shopimg[1].imgList.push(imgMode)
							if (this.shopimg[1].imgList.length >= 3) {
								this.shopimg[1].addShow = false
							}
						}
					}

					// console.log(this.shopimg[0].imgList, 78798797979)
				} catch (err) {
					// console.log(err)
				}
			},
			async classifyApi() {
				let params = {
					mcType: '1',
					prentId: '0',
				}
				try {
					const {
						data
					} = await businessType(params)



					for (var i = 0; i < data.length; i++) {
						if (this.managementId == data[i].managementId) {
							this.managementName = data[i].managementName
						}
					}
					
				} catch (err) {
					
				}
			},
			async upDataBtn() {
				var oDate1 = new Date(this.getStartDate);
				var oDate2 = new Date(this.presentTime);
				var oDate3 = new Date(this.getEndDate);
				console.log(oDate1.getTime())
				console.log(oDate3.getTime())

				if (this.clssify.managementId == '') {
					this.$utils.common.toast.fail("分类不能为空");
				} else if (this.volumeName == '') {
					this.$utils.common.toast.fail("到店卷标题不能为空");
				} else if (this.bookValue == '') {
					this.$utils.common.toast.fail("到店卷面值不能为空");
				} else if (this.salesPrice == '') {
					this.$utils.common.toast.fail("到店卷售价不能为空");
				} else if (oDate1.getTime() > oDate3.getTime()) {
					this.$utils.common.toast.fail("开始时间不能大于结束时间");
				} else if (oDate1.getTime() < oDate2.getTime()) {
					this.$utils.common.toast.fail("开始时间不能选择过去的时间");
				}
				let record = {
					id: this.rollId,
					shopNumberId: this.shopNumberId,
					storeTotalType: this.clssify.managementId == '' ? this.clssify.managementId : this.managementId, // 商品总分类编号
					volumeName: this.volumeName, // 卷名称
					bookValue: this.bookValue, // 到店卷面值(元)
					salesPrice: this.salesPrice, // 到店卷售价(元)
					validPeriodType: this.current == 0 ? 2 : 1, // 到店卷有效期类型（1-相对时间、2-指定时间)
					// timeAfterOrder:this.current==0? this.timeAfterOrder : '', // 下单后有效时间（天）
					startTime: this.getStartDate, // 开始时间
					endTime: this.getEndDate, // 结束时间
					picturePath: this.picturePath, // 图片路径
					pictureType: this.pictureType, // 图片类型(主图-1、特`色-2)
					textIntroduction: this.introduce, // 文字介绍
					otherJson: this.editorTxt, // 其他字段(json格式)
					// immediatelyMounted: this.immediatelyMounted, // 是否需要预约(1-是、2-否)
					// appointmentIntroduction: this.appointmentIntroduction, // 提前预约时间文本介绍
					// timeLimit: this.timeLimit, // 是否时间限制（1-是、2-否）
					// holidayUnavailableTime: this.holidayUnavailableTime, // 节假日不可用时间(节假日)
					// accumulationUse: this.accumulationUse, // 进店是否可用积累使用
					// unavailableTimeDay: this.unavailableTimeDay, // 到店卷是否全场通用(1-可、2-不可、3-部分可积累使用)
					// preferentialConcession: this.preferentialConcession, // 可否与其它优惠同享
					// suitAge: this.suitAge, //适用年龄
					submissionType: this.submissionType, // 提交类型(保存-1、提交审核-2)
				}
				console.log(record)
				try {
					const {
						data
					} = await updCoupon(record)
					// uni.removeStorage({
					//     key: 'introduce',
					//     success: function (res) {

					//     }
					// });
					// uni.removeStorage({
					//     key: 'clssify',
					//     success: function (res) {

					//     }
					// });
					// console.log(data)
					this.$utils.common.toast.fail("修改成功");
					setTimeout(() => {
						this.$utils.common.navigateBack()
					}, 1000)
				} catch (err) {
					console.log(err)
					if (err.code && err.statusCode) {
						if (err.code !== 200) {
							return this.$utils.common.toast.fail(err.data.message);
						}
						return this.$utils.common.toast.fail(err.errMsg);
					}
				}

			}
		},

	}
</script>

<style>
	page {
		background: rgba(240, 245, 249, 1);
	}
</style>
<style lang="scss" scoped>
	.coupon {
		.container {
			// width: 100vh;
			padding: 30rpx;
			background-color: #FFFFFF;

			// margin-top: 20rpx;
			&-title {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(26, 26, 26, 1);
				opacity: 1;
				margin-bottom: 30rpx;
			}
		}

		.lookModal {
			width: 600rpx;
			// height:754rpx;
			background: rgba(255, 255, 255, 1);
			opacity: 1;
			border-radius: 20rpx;
			padding: 36rpx;

			view {
				margin-bottom: 30rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
			}
		}

		.txtModal {
			width: 750rpx;
			// height:754rpx;
			background: rgba(255, 255, 255, 1);
			opacity: 1;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 50rpx 36rpx;

			&-title {
				display: flex;
				margin-bottom: 64rpx;

				.txt {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(29, 29, 29, 1);
					opacity: 1;
				}

				.cancel {
					font-size: 34rpx;
					margin-left: auto;
				}
			}

			&-txt {
				margin-bottom: 30rpx;

				.list {
					width: 100vh;
					padding: 20rpx 0;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(29, 29, 29, 1);
					opacity: 1;
				}

				.listActive {
					color: rgba(12, 212, 211, 1);
				}

				.details {
					display: inline-block;
					width: 210rpx;
					height: 80rpx;
					text-align: center;
					background: rgba(255, 255, 255, 1);
					border: 2rpx solid rgba(214, 214, 214, 1);
					border-radius: 6rpx;
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 80rpx;
					color: rgba(74, 74, 74, 1);
					margin-right: 16rpx;
					margin-bottom: 60rpx;
					opacity: 1;
				}

				.active {
					background: rgba(12, 212, 211, 1);
					color: rgba(255, 255, 255, 1);
				}
			}

			&-btn {
				width: 678rpx;
				height: 88rpx;
				background: rgba(12, 212, 211, 1);
				opacity: 1;
				border-radius: 20rpx;
				margin: 0 auto;
				text-align: center;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 88rpx;
				color: rgba(255, 255, 255, 1);
				// position: absolute;
			}
		}

		&-explain {
			background-color: #FFFFFF;
			border-bottom: 2rpx solid rgba(226, 226, 226, 1);

			.txt {
				padding: 20rpx;
				width: 680rpx;
				height: 154rpx;
				background: rgba(244, 244, 244, 1);
				opacity: 1;
				margin: 0 auto;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(144, 144, 144, 1);
				opacity: 1;
			}
		}

		&-check {
			display: flex;
			padding: 30rpx 32rpx;
			align-items: center;
			background-color: #FFFFFF;
			border-bottom: 2rpx solid rgba(226, 226, 226, 1);

			&-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(26, 26, 26, 1);
				opacity: 1;
			}

			&-switch {
				margin-left: auto;
			}
		}

		&-introduce {
			padding: 0 32rpx;
			background-color: #FFFFFF;
			border-bottom: 2rpx solid rgba(226, 226, 226, 1);

			&-title {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(26, 26, 26, 1);
				opacity: 1;
				// margin-bottom: 20rpx;
			}

			&-txt {
				padding: 32rpx 0;
			}
		}

		.upload {
			padding: 32rpx 30rpx 0 30rpx;
			display: flex;
			flex-wrap: wrap;
			background-color: #ffffff;
			margin-bottom: 20rpx;

			.upIcon {
				position: absolute;
				top: 0;
				right: 0;
			}

			&-child {
				position: relative;
				margin: 2rpx;
				width: 186rpx;
				height: 186rpx;
				margin-right: 20rpx;
				overflow: hidden;

				image {
					width: 186rpx;
					height: 186rpx;
				}

				&-title {
					position: absolute;
					bottom: 6rpx;
					width: 100%;
					padding: 24rpx;
					padding-bottom: 18rpx;
					color: #ffffff;
					text-overflow: ellipsis;
					overflow: hidden;
					background: linear-gradient(180deg,
						rgba(113, 113, 113, 0) 0%,
						rgba(0, 0, 0, 0.33) 33%,
						rgba(3, 3, 3, 1) 100%);
				}
			}

			.addPhoto {
				margin: 2rpx;
				width: 186rpx;
				height: 186rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				// background: rgba(242, 242, 242, 1);
				border: 2rpx dashed rgba(230, 230, 230, 1);
				font-size: 106rpx;
				overflow: hidden;

				text {
					font-size: 52rpx
				}
			}
		}

		&-img {
			padding: 58rpx 30rpx;
			background-color: #FFFFFF;

			&-title {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(26, 26, 26, 1);
				opacity: 1;
			}

			&-txt {
				margin: 26rpx 0;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(100, 100, 100, 1);
				opacity: 1;
			}
		}

		.date {
			&-right {
				display: flex;
			}

			&-bottom {
				width: 100vw;
				padding: 28rpx;
				// padding-bottom: 8rpx;
				background: rgba(255, 255, 255, 1);
				border-bottom: 2rpx solid rgba(226, 226, 226, 1);
				display: flex;
				justify-content: space-between;

				&-right {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 44rpx;
					color: rgba(12, 212, 211, 1);
					opacity: 1;
				}

				&-right-2 {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 44rpx;
					color: #333 !important;
					opacity: 1;

					input {
						text-align: right;
						margin-right: 10rpx;
					}
				}

				&-left {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;

					color: rgba(3, 3, 3, 1);
					display: flex;
					align-items: center;
				}
			}
		}

		&-title {
			padding: 22rpx 32rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(123, 141, 149, 1);
			opacity: 1;
		}

		&-list {
			height: 100rpx;
			background: rgba(255, 255, 255, 1);
			opacity: 1;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid rgba(226, 226, 226, 1);
			font-size: 34rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(26, 26, 26, 1);
				opacity: 1;
			}

			.txt {
				margin-left: auto;
				width: 270rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: right;

				text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(26, 26, 26, 1);
					opacity: 1;
				}

				input {
					text-align: right;
				}
			}

			.txts {
				margin-left: auto;
				text-align: right;

				text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(26, 26, 26, 1);
					opacity: 1;
				}

				input {
					text-align: right;
				}
			}

			.unit {
				margin-left: 10rpx;
			}

			.icon {
				width: 14rpx;
				height: 28rpx;
				margin-left: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		&-operation {
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;

			&-protocol {
				width: 750rpx;
				height: 94rpx;
				background: rgba(255, 255, 255, 1);
				line-height: 94rpx;
				opacity: 1;
				padding: 0 30rpx;

				text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(26, 26, 26, 1);
					opacity: 1;
				}

				.declare {
					color: rgba(12, 212, 211, 1);
				}
			}

			&-btn {
				display: flex;
				text-align: center;

				.saveBtn {
					width: 280rpx;
					height: 100rpx;
					background: rgba(228, 252, 251, 1);
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 100rpx;
					color: rgba(12, 212, 211, 1);
					opacity: 1;
				}

				.upBtn {
					width: 470rpx;
					height: 100rpx;
					background: rgba(12, 212, 211, 1);
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 100rpx;
					color: rgba(255, 255, 255, 1);
					opacity: 1;
				}
			}
		}

		.base {
			height: 200rpx;
		}
	}
</style>
